<template>
	<view class="home">
		<custom-navbar title="自我介绍" :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="p30">
				<view class="formdata p4030">
					<view class="mb50">
						<view class="mb37">自我介绍</view>
						<up-textarea v-model="formData.content" count :maxlength='2000' :custom-style="{
              height: '240rpx',
              background: '#F6F6F6',
              borderRadius: '20rpx'
            }" placeholder="可以简单介绍一下您的优点和技能哦"></up-textarea>
					</view>

					<view class="mb50">
						<view class="mb37">附件 (仅支持上传图片，最多可上传9张)</view>
						<custom-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete"
							@uploadSuccess="handleUploadSuccess" @uploadFail="handleUploadFail" :maxCount="9"
							:autoUpload="true" />
					</view>
				</view>

				<view class="submit-btn" @click="handleSubmit">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 导入组件和API
	import CustomNavbar from '@/components/custom-navbar.vue'
	import CustomUpload from '@/components/custom-upload.vue'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'; // 添加 onMounted 导入
	import {
		selfintroduction,
		talendList
	} from '@/api/talents'; // 引入自我介绍API

	// 导航栏高度计算（适配不同设备）
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 表单数据
	const formData = ref({
		id: null,
		content: '',
		pic: []
	})
	const fileList = ref([])

	// 返回按钮
	const handleBack = () => {
		uni.navigateBack()
	};

	// 文件上传成功
	const handleUploadSuccess = ({
		url
	}) => {
		fileList.value.push({
			url: url,
			status: 'success'
		})
	}

	// 删除文件
	const handleDelete = (index) => {
		fileList.value.splice(index, 1)
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		})
	}


	// 获取自我介绍数据
	const fetchSelfIntroduction = async () => {
		try {
			const res = await talendList(3) // type=3 表示自我介绍
			if (res.code === 200 && res.data.data.length > 0) {
				const introData = res.data.data[0]
				formData.value = {
					id: introData.id,
					content: introData.content,
					pic: introData.pic || []
				}

				// 初始化文件列表
				fileList.value = introData.pic.map(url => ({
					url: url,
					status: 'success'
				}))
			}
		} catch (error) {
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		}
	}
	// 提交表单
	// 提交表单
	const handleSubmit = async () => {
		if (!formData.value.content.trim()) {
			return uni.showToast({
				title: '请填写自我介绍',
				icon: 'none'
			});
		}

		try {
			uni.showLoading({
				title: '提交中...',
				mask: true
			});

			// 修正后的参数对象
			const params = {
				id: formData.value.id,
				self_introduction: formData.value.content,
				attachment_path: JSON.stringify(
					fileList.value
					.filter(file => file.status === 'success')
					.map(file => file.url)
				) // 修正括号闭合
			};

			await selfintroduction(params);

			uni.showToast({
				title: '提交成功',
				icon: 'success',
				success: () => {
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/resume/index'
						})
					}, 1500)
				}
			});
		} catch (error) {
			uni.showToast({
				title: error.message || '提交失败',
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};
	// 初始化
	onMounted(() => {
		fetchSelfIntroduction()
	})
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);

			.p30 {
				padding: 30rpx;
			}

			.formdata {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				&.p4030 {
					padding: 40rpx 30rpx;
				}

				.mb50 {
					margin-bottom: 50rpx;
				}

				.mb37 {
					margin-bottom: 37rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			:deep(.u-textarea__count) {
				background: transparent !important;
				color: #999 !important;
			}

			.submit-btn {
				width: 100%;
				height: 88rpx;
				background: #2979FF;
				border-radius: 44rpx;
				color: #fff;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60rpx;
			}
		}
	}
</style>